<template>
    <component-page-tree :operate="treeOperate" @change="treeChangeNode">
        <template v-slot:header-main>
            <div class="title">{{ $t('platform.doc.title.header-main') }}</div>
        </template>
        <template v-slot:default>
            <div class="flex-center p-2" v-show="tree.id && dataStatus != 'dle'">
                <component-page-loading v-if="['loading', 'error', 'nodata'].indexOf(dataStatus) >= 0"
                                        :status="dataStatus" @reload="getData">
                </component-page-loading>
            </div>
            <div class="py-3 px-5 max-w-screen-lg mx-auto editor" id="editor" v-show="tree.id && dataStatus == 'dle'"></div>
        </template>
    </component-page-tree>
</template>

<script>
// editor
import '@toast-ui/editor/dist/toastui-editor.css';
import Editor from '@toast-ui/editor';
// editor 代码高亮
import 'prismjs/themes/prism.css';
import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js';
// editor 字体颜色
import 'tui-color-picker/dist/tui-color-picker.css';
import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
// editor 表格合并
import '@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css';
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
// editor UML
import uml from '@toast-ui/editor-plugin-uml';

export default {
    data() {
        return {
            tree: {},
            treeOperate: {
                action: {
                    getTreeList: '/platform/doc/tree/getList',
                },
                tree: {
                    defaultExpandFirstLevel: true,
                },
            },
            dataStatus: 'dle',
            data: {
                doc: '',
            },
            editor: {},
        }
    },
    mounted() {
        // editor 初始化
        this.editor = Editor.factory({
            height: 'auto',
            el: document.querySelector('#editor'),
            plugins: [colorSyntax, codeSyntaxHighlight, tableMergedCell, uml],
            usageStatistics: false,
            viewer: true,
        });
    },
    methods: {
        // 节点改变
        treeChangeNode(data) {
            // 缓存数据
            this.tree = data;
            // 获取数据
            this.getData();
        },
        // 获取数据
        getData() {
            // 状态加载中
            this.dataStatus = 'loading';
            // 清空 editor
            this.editor.setMarkdown('');
            // 获取数据
            axios.get('/platform/doc/doc/getData', {
                params: {
                    tree_id: this.tree.id
                }
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataStatus = 'dle';
                    this.$nextTick(() => {
                        this.editor.setMarkdown(response.data.resp_data.md)
                    })
                } else if (response.data.resp_msg.code == 44100) {
                    this.dataStatus = 'nodata';
                } else {
                    this.dataStatus = 'error';
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>

::v-deep .editor .toastui-editor-defaultUI,
::v-deep .editor .toastui-editor-contents,
::v-deep .editor .toastui-editor-defaultUI .ProseMirror {
    font-family: $font-family !important;
    color: $font-color-first !important;
}

::v-deep .editor .toastui-editor-contents,
::v-deep .editor .toastui-editor-defaultUI .ProseMirror {
    font-size: 14px;
    line-height: 1.7;
}

::v-deep .editor .toastui-editor-contents *:not(table) {
    line-height: 1.7;
}

::v-deep .editor .toastui-editor-contents h1,
::v-deep .editor .toastui-editor-contents h2,
::v-deep .editor .toastui-editor-contents h3,
::v-deep .editor .toastui-editor-contents h4,
::v-deep .editor .toastui-editor-contents h5,
::v-deep .editor .toastui-editor-contents h6,
::v-deep .editor .toastui-editor-contents p {
    color: $font-color-first !important;
}

::v-deep .editor .toastui-editor-contents th p {
    color: #fff !important;
}

::v-deep .editor .toastui-editor-contents blockquote {
    padding: 10px 15px;
    border-left-style: solid;
    border-left-width: 8px;
    border-color: #D6DBDF;
    background: none repeat scroll 0 0 rgba(102, 128, 153, .05);
}

::v-deep .editor .toastui-editor-contents > p,
::v-deep .editor .toastui-editor-contents > pre,
::v-deep .editor .toastui-editor-contents > blockquote {
    margin: 0 0 20px;
}

::v-deep .editor .toastui-editor-contents h1,
::v-deep .editor .toastui-editor-contents h2,
::v-deep .editor .toastui-editor-contents h3,
::v-deep .editor .toastui-editor-contents h4,
::v-deep .editor .toastui-editor-contents h5,
::v-deep .editor .toastui-editor-contents h6 {
    margin: 10px 0;
    font-weight: 500;
    line-height: 25px;
}

::v-deep .editor .toastui-editor-md-heading {
    font-weight: 500;
}

::v-deep .editor .toastui-editor-contents h1,
::v-deep .editor .toastui-editor-contents h2,
::v-deep .editor .toastui-editor-contents h3 {
    line-height: 40px
}

::v-deep .editor .toastui-editor-contents h1 {
    margin: 50px 0 20px;
}

::v-deep .editor .toastui-editor-contents h2 {
    margin: 35px 0 20px;
}

::v-deep .editor .toastui-editor-contents h3 {
    margin: 20px 0;
}

</style>
